<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性线性渐变</title>
    <!--      background:-webkit-linear-gradient(
            left top,//起始位置
            indianred 100%,//起始颜色
            black 50%,
            blue 100%,
            #3333FF 70%);//终止颜色
            其中%代表：该颜色所占的比例
        }-->

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            border:1px solid #ddd;
            background:-webkit-linear-gradient(
            left bottom,
            indianred 25%,
            yellow 50%,
            green 75%,
            blue 100%);
        }
        #box1{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border:1px solid #ddd;
            background:-webkit-linear-gradient(
                    left bottom,
                    indianred 25%,
                    yellow 50%,
                    green 75%,
                    blue 100%);
        }
        #box2{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border:1px solid #ddd;
            background:-webkit-linear-gradient(
                    -45deg,
                    indianred 25%,
                    yellow 50%,
                    green 75%,
                    blue 100%);
        }
        #box3{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            border:1px solid #ddd;
            background:-webkit-linear-gradient(
                    0deg,
                    indianred 25%,
                    yellow 50%,
                    green 75%,
                    blue 100%);
        }
        #box4 {
            width: 300px;
            height: 300px;
            margin: 10px auto;
            background:-webkit-radial-gradient(
                    center,
                    50% 50%,
                    red,
                    yellow,
                    black,
                    blue,
                    #666,
                    #ccc,
                    #fff);
        }

        p{
            text-align: center;
        }
    </style>
</head>
<body>

     <p>方位控制</p>
    <div id="box1"></div>
     <p>度数控制</p>
    <div id="box2"></div>
     <p>移动</p>
    <div id="box3"></div>
     <p>径向渐变</p>
     <div id="box4"></div>
     <script>
         var n=0;
         var b3=document.getElementById("box3");
         window.setInterval(function () {
             n++;
             b3.style.background="-webkit-linear-gradient(\
                  "+n+"deg,\
                 indianred 25%,\
                 yellow 50%,\
                 green 75%,\
                 blue 100%)"
         },100);
     </script>
</body>
</html>